<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			body{background: #000000;}
			.heart{
				width: 100px;
				height: 160px;
				margin: 100px auto;
				position: absolute;
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				-webkit-transform-style: preserve-3d;
				        transform-style: preserve-3d;
				-webkit-animation: rot 15s linear infinite;
				-moz-animation: rot 15s linear infinite;
				-ms-animation: rot 15s linear infinite;
				        animation: rot 15s linear infinite;
			}
			@-webkit-keyframes rot{
				from{-webkit-transform:rotateY(0deg) rotateX(0deg);transform:rotateY(0deg) rotateX(0deg)}
				to{-webkit-transform:rotateY(360deg) rotateX(360deg);transform:rotateY(360deg) rotateX(360deg)}
			}
			@keyframes rot{
				from{-webkit-transform:rotateY(0deg) rotateX(0deg);transform:rotateY(0deg) rotateX(0deg)}
				to{-webkit-transform:rotateY(360deg) rotateX(360deg);transform:rotateY(360deg) rotateX(360deg)}
			}
			.rib{
				position: absolute;
				width: 100px;
				height: 160px;
				border-width: 1px 1px 0 0;
				border-color: red;
				border-style: solid;
				border-radius: 50% 50% 0 / 50% 50% 0;	
			}
			.cube{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 50px;
				height: 50px;
				-webkit-transform-style: preserve-3d;
				        transform-style: preserve-3d;
				-webkit-perspective: 500px;
				        perspective: 500px;
				-webkit-transform: translateZ(-25px);
				        transform: translateZ(-25px);
			}
			.cube div{
				position: absolute;
				width: 50px;
				height: 50px;
				color: red;
			}
			.cube div:nth-child(1){
				top: -50px;
				left: 0;
				-webkit-transform: rotateX(-90deg);
				        transform: rotateX(-90deg);
				-webkit-transform-origin: bottom;
				    -ms-transform-origin: bottom;
				        transform-origin: bottom;
			}
			.cube div:nth-child(2){
				top: 50px;
				left: 0;
				-webkit-transform: rotateX(90deg);
				        transform: rotateX(90deg);
				-webkit-transform-origin: top;
				    -ms-transform-origin: top;
				        transform-origin: top;
			}
			.cube div:nth-child(3){
				top: 0px;
				left: -50px;
				-webkit-transform: rotateY(90deg);
				        transform: rotateY(90deg);
				-webkit-transform-origin: right;
				    -ms-transform-origin: right;
				        transform-origin: right;
			}
			.cube div:nth-child(4){
				top: 0;
				left: 50px;
				-webkit-transform: rotateY(-90deg);
				        transform: rotateY(-90deg);
				-webkit-transform-origin: left;
				    -ms-transform-origin: left;
				        transform-origin: left;
			}
			.cube div:nth-child(5){
				top: 0px;
				left: 0;
			}
			.cube div:nth-child(6){
				top: 0px;
				left: 0;
				-webkit-transform: translateZ(50px);
				        transform: translateZ(50px);
			}
			.rib:nth-child(1){
				transform: rotateY(10deg) rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(2){
				transform: rotateY(20deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(3){
				transform: rotateY(30deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(4){
				transform: rotateY(40deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(5){
				transform: rotateY(50deg) rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(6){
				transform: rotateY(60deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(7){
				transform: rotateY(70deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(8){
				transform: rotateY(80deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(9){
				transform: rotateY(90deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(10){
				transform: rotateY(100deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(11){
				transform: rotateY(110deg) rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(12){
				transform: rotateY(120deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(13){
				transform: rotateY(130deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(14){
				transform: rotateY(140deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(15){
				transform: rotateY(150deg) rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(16){
				transform: rotateY(160deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(17){
				transform: rotateY(170deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(18){
				transform: rotateY(180deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(19){
				transform: rotateY(190deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(20){
				transform: rotateY(200deg)  rotateZ(45deg) translateX(30px);	
			}
				.rib:nth-child(21){
				transform: rotateY(210deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(22){
				transform: rotateY(220deg) rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(23){
				transform: rotateY(230deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(24){
				transform: rotateY(240deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(25){
				transform: rotateY(250deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(26){
				transform: rotateY(260deg) rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(27){
				transform: rotateY(270deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(28){
				transform: rotateY(280deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(29){
				transform: rotateY(290deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(30){
				transform: rotateY(300deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(31){
				transform: rotateY(310deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(32){
				transform: rotateY(320deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(33){
				transform: rotateY(330deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(34){
				transform: rotateY(340deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(35){
				transform: rotateY(350deg)  rotateZ(45deg) translateX(30px);	
			}
			.rib:nth-child(36){
				transform: rotateY(360deg)  rotateZ(45deg) translateX(30px);	
			}
			#dis{
				width: 200px;
				height: 110px;
				color: #F47A20;
				font-family: "楷体";
				text-indent: 55px;
				font-size: 15px;
				position: absolute;
				bottom:60px;
				left: 50%;
				margin-left: -100px;
			}
		</style>
	</head>
	<body>
		<div class="dis" id="dis"></div>
		<div class="heart">
			<div class="cube">
				<div><img src="images/1.jpg" width="50px" height="50px"></div>
				<div><img src="images/2.jpg" width="50px" height="50px"></div>
				<div><img src="images/3.jpg" width="50px" height="50px"></div>
				<div><img src="images/4.jpg" width="50px" height="50px"></div>
				<div><img src="images/5.jpg" width="50px" height="50px"></div>
				<div><img src="images/6.jpg" width="50px" height="50px"></div>
			</div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
			<div class="rib"></div>
		</div>
		<script>
			var i = 0;
			var str = "如果，爱一个人，守一份爱情，可以在早春一起去踏青，可以在盛夏一起去赏荷，可以在浅秋一起去观月，可以在深冬一起去寻梅，不厌倦，却欢乐，不平凡，却平淡。那么，此生便无憾了。";
			window.onload = function typing(){
				var odis = document.getElementById('dis');
				odis.innerHTML += str.charAt(i);
				i++;
				var id = setTimeout(typing,500);
				if(i==str.length){
					clearTimeout(id)
				}
			}
		</script>
	</body>
</html>
